<template>
  <div>
    <div class="ECompanySearch" :style="styleColor" style="z-index:2">
        <!-- 查企业 查标签 -->
        <div class="searchConditions">
          <div class="conditions" :class="selected == 'enterprise' ?'selected':''" @click="DEnterprise">
            <span>查企业</span>
          </div>
          <div class="conditions" :class="selected == 'label' ?'selected':''" @click="DLabel">
            <span>查标签</span>
          </div>
          <div class="conditions" :class="selected == 'customs' ?'selected':''" @click="DCustoms">
            <span>查关区</span>
          </div>
        </div>
        <div class="search" :class="showInput?'active':''" >
         
          <div class="input" ref="search">
            <input type="text" autocomplete="off" :placeholder="placeholder" id="mySearch" ref="mySearch" v-model.trim="searchValue"
              >
          </div>
          <div class="icon" @click="changeCustomerName">
            <img src="@/assets/images/bigViewIMG/search.png" alt="">
          </div>
          <!-- <span class="clear" @click="clearValue"></span> -->
         
        </div>
        <div class="selectList" v-show="showDrop"  ref="showPanel">
          <!-- title  -->
          <div class="title">
            <div class="left">
              <img src="@/assets/images/bigViewIMG/companyIcon.png" alt="">
              <span>相关企业</span>
            </div>
            <div class="right">
              <span>单位：元</span>
            </div>
          </div>
          <div class="search_table">
            <div class="_title">
              <div style="color:#00ffff;width:40%">企业名称</div>
              <div style="color:#00ffff;width:20%">进口额</div>
              <div style="color:#00ffff;width:20%">出口额</div>
              <div style="color:#00ffff;width:20%">税额</div>
            </div>
            <ul>
              <li v-for="item in headOptions" :key="item.tradeCo" @click="searchCustomer(item)" >
                <div class="_item1">{{item.fullName}}</div>
                <div class="_item2">{{ item.imports }}</div>
                <div class="_item2">{{ item.exports }}</div>
                <div class="_item2">{{ item.tax }}</div>
              </li>
            </ul>
          </div>
          <div class="bottom_page">
              <el-pagination background small @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="page" :page-size="size" layout="total, prev, pager, next" :total="total">
                  </el-pagination>
          </div>
        </div>
     
    
    </div>
   
   
  </div>
  
</template>

<script>
// import { debounce } from '@/utils'

import { getSearchList } from '@/api/views/index.js'
import { setScreenItem } from '@/utils/screenStorage.js'
import { mapGetters } from 'vuex'
import { encrypt } from '@/utils/AES.js'
export default {

  props: {    //仿照超链，props项保留
    value: Object,
    ispreview: Boolean
  },
  data() {    //仿照超链，data项保留
    return {
      options: {},
      searchValue:'',
      showSearchDialog:false,
      headOptions:[
       
      ],
      showInput:true,
      showDrop:false,
      placeholder:'请输入企业名称或企业编码',
      selected:'enterprise',
      page:1,
      size:10,
      total:0
    };
  },
  created() {
    // removeScreenItem()
    document.addEventListener('click', (e) => {
      if (this.$refs.showPanel) {
        let isSelf = this.$refs.showPanel.contains(e.target)
        let searchRef= this.$refs.search.contains(e.target)
       
        if (!isSelf) {
          if (searchRef) {
            return
          }else {
            this.showDrop = false
          }
         
        }
      }
    })
  },
  watch:{
    showInput:{
      handler(newVal){
        if(newVal==true) {
          // this.$refs.mySearch.focus()
          // this.showDrop=true
        }
      }
    },
    headOptions:{
      deep:true,
      handler(newVal){
      
        this.showDrop=true
      }
    },
    customsArea:{
      handler(newVal){
        if (newVal) {
          this.DCustoms()
        }
      }
    },
    enterpriseLabel:{
      handler(val){
        // console.log(val);
        if(val) {
          // 选中查标签
          this.DLabel()
          // 给输入框赋值
          this.searchValue=val
          this.$nextTick(()=>{
             this.changeCustomerName()
          })
         

        }
      }
    }
  },
  computed:{
    ...mapGetters(['customsArea','enterpriseLabel']),
    transStyle() {
      return this.objToOne(this.options);
    },
    styleColor(){
      return {
        position: this.ispreview ? "absolute" : "static",
        background: this.transStyle.background,
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        right: this.transStyle.right + "px"

      }
    }
  },
  mounted(){
    // console.log('.>>>>>>>>>>>>', this.value)
   
    this.options = this.value;

  },
  methods:{
    handleSizeChange(val) {
      this.size=val
      this.changeCustomerName()
      
    },
    handleCurrentChange(val) {
      this.page=val
      this.changeCustomerName()
    },

    // 点击查企业
    DEnterprise(){
      this.clearValue()
      this.selected ='enterprise'
      this.placeholder ='请输入企业名称或企业编码'
    },
    // 点击查标签
    DLabel(){
      this.clearValue()
      this.selected = 'label'
      this.placeholder ='请输入标签名'
    },
    // 点击查关区
    DCustoms(){
      this.clearValue()
      this.selected = 'customs'
      this.placeholder ='请输入关区代码'
    },
    // 清除
    clearValue(){
      this.searchValue=''
      this.$refs.mySearch.focus()
    },
    //用户点击菜单的时候
    searchCustomer(item) {
      // console.log(item)
      this.showDrop=false
      this.$router.push({
        path: "/visual/bigscreen/viewer?reportCode=SecondView",
        query: { 
          key: encrypt(JSON.stringify({
            company: item.fullName,
             tradeCo: item.tradeCo
          }))
         }
      });
      setScreenItem({ company: item.fullName})
      // 跳转 情况关区代码和状态
      // this.$store.commit('homeStatus/changeCustomCode', '')
      // this.$store.commit('homeStatus/changeCustomsArea', false)
      this.$store.commit('homeStatus/changeEnterpriseLabel',null)
    },
    // 点击搜索
    async changeCustomerName(){
      if (this.searchValue == '' || !this.searchValue) return 
      this.showDrop=true
      if (this.selected =='enterprise') {
        const res = await getSearchList({ tradeCoOrFullName: this.searchValue, page: this.page, size: this.size })
        // console.log('查企业',res);
        this.headOptions = res.data.list
        this.total = res.data.total
      } else if (this.selected =='label') {
        // console.log(this.searchValue);
        this.$store.commit('homeStatus/changeAEODialogShow',{
          show:true,
          value:this.searchValue
        } )
        // const res = await getSearchList({ enterpriseLabel: this.searchValue, page: this.page, size: this.size })
        // // console.log('查标签', res);
        // this.headOptions = res.data.list
        // this.total = res.data.total
      } else if (this.selected =='customs') {
        const res = await getSearchList({ customsCodeOrName: this.searchValue,page:this.page,size:this.size })
        // console.log('查关区', res);
        this.headOptions = res.data.list
        this.total=res.data.total
      }

    },
    
   
  }
}
</script>

<style lang="scss" scoped>
@keyframes select {
      0% {
        height: 0px;
      }
  
      100% {
        height: 200px;
      }
    }

      
.ECompanySearch {
  // height: 50px;
  font-family: 'Poppins', sans-serif;
  

  // display: flex;
  .searchConditions {
     
      position: absolute;
      top: -30px;
      left: 0;
      display: flex;
      font-size: 14px;
      height: 28px;
      .conditions {
        color: #fff;
        margin-right: 10px;
        width:60px;
        cursor: pointer;
        padding-left:2px;
        padding-right: 4px;
        line-height: 22px;
      }
      .selected{
        color: #00a5ff;
        background: url('../../../../../assets/images/bigViewIMG/chaqiye.png') no-repeat;
      }
    }
  .search {
      position: relative;
      width: 30px;
      height: 30px;
      background-color: #0041fb;
      border-radius: 8px;
      transition: 0.4s;
      box-shadow: 0 0 0 2px #007dff;
      overflow: hidden;
      // border:1px solid #
    }
  
    .search.active {
      width: 300px;
    }
    
    .search .icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 50px;
      height: 30px;
      background-color: #0097fe;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      cursor: pointer;
      img {
        width: 20px;
          height: 20px;
      }
    }
  
   
  
    .search .input {
      position: relative;
      width: 200px;
      height: 30px;
      left: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .search .input input {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      border: none;
      outline: navajowhite;
      font-size: 14px;
      padding: 10px 0;
      background-color: #0045ff;
      color: #fff;
      
    }
    .search .input input::-webkit-input-placeholder {
      font-size: 14px;
      color: rgba(255, 255, 255, .5);
      line-height: 20px;
    }
    .clear {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      width: 15px;
      height: 15px;
      right: 15px;
      /* background-color: #ff0; */
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .clear::before {
      position: absolute;
      content: '';
      width: 1px;
      height: 15px;
      background-color: #fff;
      transform: rotate(45deg);
    }
  
    .clear::after {
      position: absolute;
      content: '';
      width: 1px;
      height: 15px;
      background-color: #fff;
      transform: rotate(315deg);
    }
    .selectList {
      position: absolute;
        top: 50px;
          left: 0px;
      width: 600px;
     
      background-color: rgba(0,50,163, 0.9);
      z-index: 2013;
      border-radius: 10px;
      overflow: auto;
      animation: select 0.1s ;
      padding: 10px;
      display: flex;
      flex-direction: column;
      .title {
        display: flex;
        justify-content: space-between;
        color: #fff;
        font-size: 13px;
        .left {
          
          img {
            width: 16px;
            height: 16px;
            margin-right: 10px;
            // vertical-align: middle;
          }
        }
      }
      .search_table {
        margin-top: 10px;
        height: 320px;
        overflow: hidden;
        ._title {
          display: flex;

        }
        ul {
          margin: 0;
              padding: 0;
              li {
                // padding: 0 10px;
                list-style: none;
                width: 100%;
                height: 30px;
                text-align: center;
                line-height: 40px;
                color: #fff;
                font-size: 14px;
                display: flex;
                ._item1 {
                    width: 40%;
                    cursor: pointer;
                
                  }
                
                  ._item2 {
                    width: 20%;
                
                  }
              }
        }
       
      }
      .bottom_page {
        
        ::v-deep .el-pagination {
          .el-pagination__total {
            color: #fff;
          }
          .btn-prev {
            background-color: transparent;
          }
          .btn-next {
            background-color: transparent;
          }
          .el-pager {
            li {
              background: transparent;
              color: #fff;
            }
            li.active {
              color: #1890ff;
            }
          }


        }
      }
     
      //  ul {
      //   margin: 0;
      //   padding: 0;
      //     li {
      //       padding: 0 10px;
      //       list-style: none;
      //       width: 100%;
      //       height: 40px;
      //       text-align: start;
      //       line-height: 40px;
      //       color: #fff;
      //       font-size: 14px;
      //       cursor: pointer;
            
      //     }:hover {
      //       background:#0045ff;
      //       border-radius:10px ;
      //     }
      //  }
    }
    
  

}
 .cardsersions-all {
      width: 400px;
      transform-origin: center top;
        z-index: 2013;
        position: absolute;
        top: 99px;
        left: 16px;
    }
</style>